<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>${ClassName}</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="demoTable">
    搜索ID：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="${ClassName?uncap_first}" lay-filter="${ClassName?uncap_first}"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addData">
            <i class="layui-icon">&#xe608;</i>新增</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delData">
            <i class="layui-icon">&#xe640;</i>批量删除</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '<#noparse>#</#noparse>${ClassName?uncap_first}'
            ,url:'/${projectName}/${ClassName?uncap_first}/list${ClassName}'
            ,toolbar: '#toolbarDemo'
            ,title: '${ClassName?uncap_first}'
            ,cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    <#list table.columns as column>
                    ,{field:'${column.columnNameExt}', title:'${column.columnComment}', fixed: 'left'}
                </#list>
                    ,{fixed: 'right', title:'操作', toolbar: '<#noparse>#</#noparse>barDemo', width:150}
                ]
            ]
            ,id: 'testReload'
            ,page: true
        });

        //工具栏事件
        table.on('toolbar(${ClassName?uncap_first})', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'addData':
                    var data = checkStatus.data;
                    addFunc();
                    break;
                case 'delData':
                    var data = checkStatus.data;
                    var ids = new Array();
                    data.forEach((item,index,array)=>{
                        ids[index] = item.id;
                    })
                    delFunc(ids);
                    break;
            };
        });

        //监听操作栏
        table.on('tool(${ClassName?uncap_first})', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确认要删除吗？', {icon: 3, title:'提示'}, function(index){
                    $.post('/${projectName}/${ClassName?uncap_first}/delete',{"_method":"delete","${table.primaryKeyExt}":data.${table.primaryKeyExt}},function (data) {
                        layer.msg("删除成功!", {
                            icon: 6,
                            time: 500
                        }, function () {
                            //删除成功刷新当前页
                            window.location.reload();
                        });
                    })
                });
            } else if(obj.event === 'edit'){
                editFunc(data.${table.primaryKeyExt});
            }
        });

        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('<#noparse>#</#noparse>demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            id: demoReload.val()
                        }
                    }
                }, 'data');
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

    function delFunc(ids) {
        if (ids.length<1){
            layer.msg("未勾选任何数据", {
                icon: 0,
                time: 500
            });
            return;
        }
        var $ = layui.jquery;
        layer.confirm('确认要删除吗？', {icon: 3, title:'提示'},function(){
            $.ajax({
                type: 'post',
                url: '/${projectName}/${ClassName?uncap_first}/deleteIds',
                dataType:'json',
                data:JSON.stringify(ids),
                contentType: "application/json; charset=utf-8",
                success:function(res){//res为相应体,function为回调函数
                    layer.msg("删除成功!", {
                        icon: 6,
                        time: 500
                    }, function () {
                        //删除成功刷新当前页
                        window.location.reload();
                    });
                },
                error:function(res){
                    layer.alert(res.responseJSON.message,{icon:5});
                }
            });
        });
    }



    function addFunc() {
        layer.open({
            type: 2,
            title:"新增信息",
            skin: 'layui-layer-molv', //加上边框
            area: ['700px', '500px'], //宽高
            content: '${ClassName?uncap_first}Detail'  //调到新增页面
        });
    }

    function editFunc(id) {
        layer.open({
            type: 2,
            title:"修改信息",
            skin: 'layui-layer-molv', //加上边框
            area: ['700px', '500px'], //宽高
            content: '${table.tableNameExt1}Detail?${table.primaryKeyExt}='+id  //调到新增页面
        });
    }
</script>

</body>
</html>